<template>
  <div class="pt-[20px]">
    <CustomTitle title="运行状态"></CustomTitle>
    <div class="relative w-[770px] h-[300px] bg-[#1B1B1B] mt-[10px] rounded-[10px] flex items-center">
      <PieCharts width="700" height="250" ref="chartsRef" />
      <div class="absolute text-white left-[230px] border-[4px] border-[#FF9F00] rounded-[100%] w-[100px] h-[100px] flex flex-col items-center justify-center">
        <div class="text-[18px]">{{ data.offline }}</div>
        <div class="text-[16px]">设备总数</div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { iDeviceStatistic } from '@/interface/iDeviceStatistic';
import * as echarts from 'echarts';
const chartsRef = ref();
const props = defineProps<{ data: iDeviceStatistic['status'] }>();

watch(
  () => props.data,
  val => {
    if (val) {
      const option: echarts.EChartsOption = chartsRef.value.getOptions();

      (option.series as any)![0].itemStyle = {
        normal: {
          color: function (colors: any) {
            var colorList = ['#53DCFF', '#E6E6E6'];
            return colorList[colors.dataIndex];
          },
        },
      };
      (option.series as any)![0].radius = ['48%', '70%'];
      (option.legend as any) = {
        top: '0',
        right: '5%',
        orient: 'vertical',
        textStyle: {
          color: '#fff',
        },
      };

      (option.series as any)![0].label = {
        show: true,
        color: 'white',
      };
      (option.series as any)![0].label = {
        show: true,
        color: 'white',
        formatter: '{d}% {b}',
      };
      (option.series as any)![0].left = '-20%';
      (option.series as any)![0].data = [
        // {
        //   value: val.idle,
        //   name: `空闲`,
        // },
        {
          value: val.running,
          name: `运行  ${val.running}`,
        },
        {
          value: val.offline,
          name: `离线  ${val.offline}`,
        },
      ];

      // (option.series[0]!.data = val.map(item => {
      //   return {
      //     value: item.value,
      //     name: item.key,
      //   };
      // })),
      // {
      //   left: '-20%',
      //   data: val.map(item => {
      //     return {
      //       value: item.value,
      //       name: item.key,
      //     };
      //   }),
      // },
      //   ],
      // };

      chartsRef.value.setOptions(option);
    }
  }
);
</script>
<style lang="scss" scoped></style>
